<!-- 添加新闻 -->
<template>
    <div class='bgff h100 pd pt10 case-context pr'>
        <p class="title-label">{{ isbj ? "编辑" : "新增" }}新闻</p>

        <div class="context-page-case mt20">
            <n-form ref="formRef" :model="form" :rules="rules" label-width="120" :inline="false" size="normal"
                label-placement="left">
                <n-grid :cols="24" :x-gap="20" :y-gap="20">
                    <n-form-item-gi span="24" label="标题:" path="title">
                        <n-input v-model:value="form.title" type="text" placeholder="请输入标题" size="medium" clearable
                            show-count :maxlength="99"></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi span="12" label="一级类目:" path="category">
                        <n-select v-model:value="form.category" filterable size="medium" :options="lmoptions" clearable
                            @change="erjilswer" />
                    </n-form-item-gi>
                    <n-form-item-gi span="12" label="二级类目:" path="reclassify" v-if="lmoptionser">
                        <n-select v-model:value="form.reclassify" filterable size="medium" :options="lmoptionser"
                            clearable />
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="封面:" path="cover">
                        <div class="logo-context vertical-center " @click="photoShowModal = true">
                            <img :src="form.cover" class="w100 h100 imgjz" v-if="form.cover" />
                            <span v-else>点击上传封面</span>
                        </div>
                    </n-form-item-gi>
                    <n-form-item-gi span="12" label="分站:" path="hnsubstation">
                        <n-select v-model:value="form.hnsubstation" filterable size="medium" :options="lmoptionssan"
                            clearable />
                    </n-form-item-gi>
                    <n-form-item-gi span="12" label="头条:">
                        <n-switch v-model:value="rwesd" size="medium" />
                    </n-form-item-gi>

                    <n-form-item-gi span="24" label="详情:" path="details" v-if="form.category != 27&&form.category != 29&&form.category != 30">
                        <div class="fwbclass ">
                            <tinymce ref="tinymceref" :ishowVideo="true"></tinymce>
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi span="12" label="文件列表:" v-else>
                        <n-upload :action='prefixS + "public/Upimg/upodf"' @before-upload="loading = true" :data="upload"
                            accept=".pdf,.doc,.docx" @finish="handleFinish">
                            <n-button :loading="loading">上传文件</n-button>
                        </n-upload>
                        <div class="" v-if="form.fileName">
                            {{ form.fileName }}
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi span="24" label="&nbsp;" class="mt40">
                        <n-button type="primary" size="medium" @click="handleValidateClick" :loading="btnLoad">提交</n-button>
                        <n-button size="medium" @click="callBack" class="ml20">返回上一页</n-button>
                    </n-form-item-gi>
                </n-grid>
            </n-form>
        </div>

        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>封面</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="封面"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { ref,reactive } from "vue"
import { dxget, dxpost, qurl, hf, transferTimeYMD, callBack, prefixS } from "../../util/index";
import tinymce from "../../components/util/tinymce.vue"
import photoGallery from "../../components/util/photoGallery";
const cz = qurl()
const isbj = ref(false)
const lmoptions = ref()
const lmoptionser = ref()
const lmoptionssan = ref()
const tinymceref = ref()
const btnLoad = ref(false)
const photoShowModal = ref()
const apiurl = "hnlq/hjlqlist"
const rwesd = ref(false)
const jjnnxe = ref("")
const loading = ref(false)
const form = ref({
    title: "",//标题
    category: "",//类目
    reclassify: "",//二级分类
    cover: "",//封面
    hnsubstation: "",
    synopsis: "",
    Host: 1,
    fileUrl:"",
    fileName:"",
    details: ""//
})

const rules = {
    title: {
        required: true,
        message: '请输入标题',
        trigger: 'blur'
    },
    category: {
        required: true,
        message: '请输选择类目',
        trigger: 'blur'
    },
    cover: {
        required: true,
        message: '请上传封面',
        trigger: 'blur'
    },

    hnsubstation: {
        required: true,
        message: '请输选择分站',
        trigger: 'blur'
    },

}
const leimuList = ref([])

const getlm = async () => {
    const { data }: any = await dxget("hnlq/api/getzdf", { name: "hncategory" })
    lmoptions.value = data
}
const getfz = async () => {
    const { data }: any = await dxget("hnlq/api/getzdf", { name: "hnsubstation" })
    lmoptionssan.value = data
}

getlm()
getfz()
const isshowcover = () => {
    if (form.value.category == '3' && (form.value.reclassify == '2')) {
        return true
    }
    return false
}

const erjilswer = async (e) => {
    form.value.reclassify = ""
    try {
        const label = lmoptions.value.filter(a => a.value == e)[0].label
        const { data }: any = await dxget("hnlq/api/getziji", { label })
        lmoptionser.value = data
    } catch (E) {
        console.log(lmoptions.value);
        console.error(E);
    }

}
const handleFinish = async ({
    file,
    event
}) => {
    const {data}:any = JSON.parse(event.currentTarget.response)
   form.value.fileUrl = data.imgurl
   loading.value = false
   jjnnxe.value = data.fileName
   form.value.fileName = data.fileName
};
let upload = reactive({
    typeName: "",
});
let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
   try{
    form.value.cover = jjnmnxe;
    photoShowModal.value = false;
   }catch(e){

   }
};
const handleValidateClick = async () => {
    btnLoad.value = true
  try{
    form.value.details = tinymceref.value.getContent().trim()
    form.value.synopsis = tinymceref.value.gettext().trim().slice(0, 300)
  }catch(e){

  }
    form.value.Host = 1
    if (rwesd.value) {
        form.value.Host = 2
    }
    await dxpost(apiurl, form.value, isbj.value ? 'put' : 'post')
    btnLoad.value = false
    window.$message.success("操作成功！")
    callBack()
}
const initFun = async () => {
    const { data }: any = await dxget(apiurl, { id: cz.id })
    if (data.Host == 2) {
        rwesd.value = true
    }
    await getlm()
    await erjilswer(data.category)
    form.value = data
    tinymceref.value.setContent(data.details)

}

if (cz.id) {
    isbj.value = true
    initFun()

}

</script>
<style scoped>
.case-context {
    overflow: auto;
    padding-bottom: 100px;
}
</style>
 
